import {reactive} from './reactivity/index.js';
import {h} from './runtime-core/index.js';
export default {
  setup() {
    // 声明响应式数据
    const state = reactive({
      count: 0
    });
    const title = '最简单的diff';
    const content = '观察控制台的DOM结构，当在输入框输入内容的时候，只有内容被改变的元素发生了闪烁，完成了最基本的diff';

    window.state = state; // 暴露到全局，方便再控制台调试

    const clickHandler = e => {
      const tar = e.target,
        tagName = tar.tagName.toLowerCase();
      if (tagName === 'button') {
        console.log(1);
        state.count++;
      }
    };
    return {
      state,
      title,
      content,
      clickHandler
    };
  },
  // 构建视图
  render(context) {
    // return h('div', {class: 'box'}, [h('p', {style: 'color:red;'}, context.state.count), h('p', {style: 'color:red;'}, context.state.count), h('p', {style: 'color:red;'}, context.state.count)]);
    // return h('div', {}, context.state.count);
    // return h('div', {['data-idx']: `${context.state.count}`}, [h('p', {}, '1'), h('p', {}, '2')]);
    // return h('div', {}, `${context.state.count}`);

    // 每次执行render都会绑定click事件，当多次调用时，btn上的事件会被多次绑定
    // 把处理函数放在setup中保证处理函数的地址一致，就不会多次添加同一个事件
    document.addEventListener('click', context.clickHandler, false);

    const list = [h('li', {}, '普通文本'), h('li', {}, '普通文本'), h('li', {}, `${context.state.count}`), h('li', {}, '普通文本'), h('li', {}, '普通文本')];
    return h('div', {}, [h('h1', {}, context.title), h('p', {}, context.content), h('button', {}, '点击加1'), h('p', {}, `${context.state.count}`), h('ul', {}, list)]);
  }
};
